<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-card">
        <!-- 登录头部 -->
        <div class="login-header">
                <div class="logo-section">
        <img src="@/assets/logo.png" alt="万象鉴真" class="logo-image">
        <h1 class="logo-text">智盾清源</h1>
      </div>
          <p class="login-subtitle">登录您的账户</p>
        </div>

        <!-- 登录表单 -->
        <form @submit.prevent="handleLogin" class="login-form">
          <div class="form-group">
            <label for="username" class="form-label">用户名/邮箱</label>
            <input
              type="text"
              id="username"
              v-model="loginForm.username"
              class="form-input"
              :class="{ 'error': errors.username }"
              placeholder="请输入用户名或邮箱"
              required
            >
            <span v-if="errors.username" class="error-message">{{ errors.username }}</span>
          </div>

          <div class="form-group">
            <label for="password" class="form-label">密码</label>
            <div class="password-input-wrapper">
              <input
                :type="showPassword ? 'text' : 'password'"
                id="password"
                v-model="loginForm.password"
                class="form-input"
                :class="{ 'error': errors.password }"
                placeholder="请输入密码"
                required
              >
              <button
                type="button"
                @click="togglePassword"
                class="password-toggle"
              >
                {{ showPassword ? '🙈' : '👁️' }}
              </button>
            </div>
            <span v-if="errors.password" class="error-message">{{ errors.password }}</span>
          </div>

          <div class="form-options">
            <label class="checkbox-wrapper">
              <input
                type="checkbox"
                v-model="loginForm.rememberMe"
                class="checkbox"
              >
              <span class="checkbox-label">记住我</span>
            </label>
            <router-link to="/forgot-password" class="forgot-password">
              忘记密码？
            </router-link>
          </div>

          <button
            type="submit"
            class="login-btn"
            :disabled="isLoading"
          >
            <span v-if="isLoading" class="loading-spinner"></span>
            {{ isLoading ? '登录中...' : '登录' }}
          </button>
        </form>

        <!-- 第三方登录 -->
        <div class="social-login">
          <div class="divider">
            <span class="divider-text">或使用以下方式登录</span>
          </div>
          <div class="social-buttons">
            <button @click="socialLogin('wechat')" class="social-btn wechat">
              <span class="social-icon">💬</span>
              <span>微信登录</span>
            </button>
            <button @click="socialLogin('qq')" class="social-btn qq">
              <span class="social-icon">🐧</span>
              <span>QQ登录</span>
            </button>
            <button @click="socialLogin('weibo')" class="social-btn weibo">
              <span class="social-icon">🔥</span>
              <span>微博登录</span>
            </button>
          </div>
        </div>

        <!-- 注册链接 -->
        <div class="register-link">
          <p>还没有账户？ <router-link to="/register">立即注册</router-link></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        rememberMe: false
      },
      errors: {},
      showPassword: false,
      isLoading: false
    }
  },
  methods: {
    togglePassword() {
      this.showPassword = !this.showPassword
    },
    
    validateForm() {
      this.errors = {}
      
      if (!this.loginForm.username) {
        this.errors.username = '请输入用户名或邮箱'
      } else if (!this.isValidEmail(this.loginForm.username) && !this.isValidUsername(this.loginForm.username)) {
        this.errors.username = '请输入有效的用户名或邮箱'
      }
      
      if (!this.loginForm.password) {
        this.errors.password = '请输入密码'
      } else if (this.loginForm.password.length < 6) {
        this.errors.password = '密码至少6位'
      }
      
      return Object.keys(this.errors).length === 0
    },
    
    isValidEmail(email) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return emailRegex.test(email)
    },
    
    isValidUsername(username) {
      // 用户名规则：3-20位，可包含字母、数字、下划线
      const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/
      return usernameRegex.test(username)
    },
    
    async handleLogin() {
      if (!this.validateForm()) {
        return
      }
      
      this.isLoading = true
      
      try {
        // 使用认证守卫的登录函数
        const { login } = await import('@/router/guards/auth.js')
        const result = await login({
          username: this.loginForm.username,
          password: this.loginForm.password
        })
        
        if (result.success) {
          // 登录成功
          ElMessage.success('登录成功！')
          
          // 优先使用查询参数中的重定向URL，如果没有则使用根据角色返回的默认路径
          const redirectUrl = this.$route.query.redirect || result.redirectPath
          this.$router.push(redirectUrl)
        } else {
          throw new Error('登录失败')
        }
        
      } catch (error) {
        // 登录失败
        this.errors.general = error.message || '登录失败，请重试'
        ElMessage.error(this.errors.general)
      } finally {
        this.isLoading = false
      }
    },
    
    async mockLoginAPI() {
      // 模拟API调用
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // 模拟登录验证
          if (this.loginForm.username === 'admin' && this.loginForm.password === '123456') {
            resolve({
              success: true,
              user: {
                id: 1,
                username: 'admin',
                email: 'admin@example.com',
                role: 'admin'
              }
            })
          } else if (this.loginForm.username === 'user' && this.loginForm.password === '123456') {
            resolve({
              success: true,
              user: {
                id: 2,
                username: 'user',
                email: 'user@example.com',
                role: 'user'
              }
            })
          } else {
            reject(new Error('用户名或密码错误'))
          }
        }, 1000)
      })
    },
    
    socialLogin(provider) {
      ElMessage.info(`${provider} 登录功能开发中...`)
    }
  }
}
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-container {
  width: 100%;
  max-width: 500px;
}

.login-card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 40px;
  backdrop-filter: blur(10px);
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
}

.logo-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.logo-image {
  width: 88px;
  height: 88px;
  object-fit: contain;
  margin-bottom: 10px;
}

.logo-icon {
  font-size: 32px;
}

.logo-text {
  font-size: 28px;
  font-weight: bold;
  color: #1e3c72;
  margin: 0;
}

.login-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.login-form {
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 25px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e1e5e9;
  border-radius: 10px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: #f8f9fa;
}

.form-input:focus {
  outline: none;
  border-color: #1e3c72;
  background: white;
  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.1);
}

.form-input.error {
  border-color: #dc3545;
}

.password-input-wrapper {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
}

.error-message {
  color: #dc3545;
  font-size: 12px;
  margin-top: 5px;
  display: block;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.checkbox-label {
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.forgot-password {
  font-size: 14px;
  color: #1e3c72;
  text-decoration: none;
  transition: color 0.3s ease;
}

.forgot-password:hover {
  color: #ff6b35;
}

.login-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.login-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(30, 60, 114, 0.4);
}

.login-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.social-login {
  margin-bottom: 30px;
}

.divider {
  text-align: center;
  margin: 30px 0;
}

.divider-text {
  font-size: 14px;
  color: #666;
}

.social-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.social-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
}

.social-btn:hover {
  border-color: #1e3c72;
  background: #f8f9fa;
}

.social-btn.wechat:hover {
  border-color: #07c160;
}

.social-btn.qq:hover {
  border-color: #1296db;
}

.social-btn.weibo:hover {
  border-color: #e6162d;
}

.social-icon {
  font-size: 16px;
}

.register-link {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #e1e5e9;
}

.register-link p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.register-link a {
  color: #1e3c72;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.register-link a:hover {
  color: #ff6b35;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-page {
    padding: 15px;
  }
  
  .login-card {
    padding: 30px 20px;
  }
  
  .logo-text {
    font-size: 24px;
  }
  
  .social-buttons {
    flex-direction: column;
  }
  
  .form-options {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
}
</style> 